<template>
	<view class="page">
		<accountHeader title="我的钥匙" jumpTo="/pages/smartKey/smartKey"></accountHeader>
		<view class="flex" style="margin-top: 30px;"></view>
		<view class="my-key-content">
			<view v-for="item in keyList" @click="detailsPage(item)" class="box">
				<u-image :src="imgUrl + item.rechargeImage" width="100px" height="100px"></u-image>
				<view class="info">
					<h4>{{item.vehicleModel}}</h4>
					<p>{{item.serialNumber}}</p>
					<span>已授权{{item.authorizedQuantity}}个用户</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import {getUserKeys} from "@/config/api/user.js"
	import accountHeader from "@/components/acountHeader.vue"
	export default{
		components:{
			accountHeader
		},
		data() {
			return{
				userInfo:"",
				keyList: '',
				imgUrl:uni.$u.http.config.baseURL,
			}
		},
		methods:{
			detailsPage(data){
			uni.navigateTo({success:()=>{console.log(123)},url: `/pages/smartKey/details?data=${encodeURIComponent(JSON.stringify(data))}`})
			},
			
		},
		onShow(){
			 this.userInfo = this.$store.state.$userInfo
			 getUserKeys().then((res)=>{
			 	this.keyList = res.rows
			 })
		}
	}
</script>

<style scoped>
	/* 页面 */
	.page{
		margin-top: 10%;
		padding:5%;
	}

	/* 我的钥匙内容样式 */
	.my-key-content .box{
		display: flex;
		border: 1px solid gainsboro;
		padding: 3%;
		margin: 4% 0;
		border-radius: 10px;
	}

	.my-key-content .info{
		height: 100px;
		padding-left: 10px;
		display: flex;
		flex-direction: column;
		color: gainsboro;
		font-size: 14px;
	}

	.my-key-content .info h4{
		font-size: 18px;
		color: black;
	}

	.my-key-content .info p{
		margin: 10px 0;
	}
</style>
